<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>
        js调用java
    </title>
</head>

<body>
<div>
    <video width="320" height="240" controls>
        <source src="http://yto-announce.oss-cn-shanghai.aliyuncs.com/20210917102021424524350239662080/%E4%BA%9A%E8%BF%90%E8%A7%86%E9%A2%91.mp4"
                type="video/mp4">
    </video>
    <video width="320" height="240" controls>
        <source src="https://outin-a790d03f476411eca3e600163e1c94a4.oss-cn-shanghai.aliyuncs.com/5677b898bc0f402984da93ce14213fce/58476e530ffd4a2d9d8dc8131dfaef50-c050b32580357f637368f7bc63157254-fd.mp4?Expires=1653365160&OSSAccessKeyId=LTAIVVfYx6D0HeL2&Signature=yr4QRvJ%2FwIcCYji9sWJBB8cLCJQ%3D"
                type="video/mp4">
    </video>

    <video width="320" height="240" controls>
        <source src="https://file3-sdgh-hs.21tb.com/202205231811/d7f4a50842ab598285275e1117c2007d/sf-server/file/getFile/b51d34af30bb9676db4e62286082abc4-C_1523333333333/yto/779439a2d33341a6a79ad4a2c8a0d85a_0100/video/mp4/779439a2d33341a6a79ad4a2c8a0d85a.mp4"
                type="video/mp4">
    </video>

    <video width="320" height="240" controls>
        <source src="https://file3-sdgh-hs.21tb.com/202205231811/0e7aff71788618a0b9fb5ac451013e02/sf-server/file/getFile/14218937489fa7e90ea7efd82f11c533-C_1523333333333/yto/645c773282344bd4a24355e06c718a05_0100/video/mp4/645c773282344bd4a24355e06c718a05.mp4"
                type="video/mp4">
    </video>

</div>

<p>
    <xmp id="show">
    </xmp>
</p>
<p>
    <xmp id="init">
    </xmp>
</p>
<p>
    <input type="text" id="text1" value="用户名(username)"/>
</p>
<p>
    <input type="text" id="text2" value="password"/>
</p>
<p>
    <input type="button" id="enter" value="发消息给Native" onclick="testDiv();"/>
</p>
<p>
    <input type="button" id="enter1" value="调用Native方法" onclick="testClick1();"/>
</p>
<p>
    <input type="button" id="enter3" value="调用Native方法2" onclick="testClick2();"/>
</p>
<p>
    <input type="button" id="enter2" value="显示html" onclick="testDiv();"/>
</p>
<p>
    <input type="button" id="enter4" value="js调用原生" onclick="test();"/>
</p>

<p>
    <input type="button" id="save" value="js调用原生save" onclick="save();"/>
</p>
<p>
    <input type="file" value="打开文件"/>
</p>
</body>
<script src="vconsole.min.js"></script>

<script>
  var vConsole = new VConsole();
















</script>
<script>
        function testDiv() {
           window.WebViewJavascriptBridge.callHandler(
                'getData','aa'
                , function(responseData) {
                 var s = responseData.replace('[','').replace(']','')
                 console.log(s.split(','));
                    document.getElementById("show").innerHTML = "string, data = " + s.split(',');
                }
            );
        }

        function save() {
            window.WebViewJavascriptBridge.callHandler(
                'saveHistory'
                , 'save111e'
                , function(responseData) {
                    document.getElementById("show").innerHTML = "send get responseData from getdata, data = " + responseData
                }
            );
        }

        function testClick() {
            //send message to native
            var data = {id: 1, content: "这是一个图片 <img src=\"a.png\"/> test\r\nhahaha"};
            window.WebViewJavascriptBridge.send(
                data
                , function(responseData) {
                    document.getElementById("show").innerHTML = "response Data from java, data = " + responseData
                }
            );

        }

        function testClick1() {
            var str1 = document.getElementById("text1").value;
            var str2 = document.getElementById("text2").value;


            //call native method
            window.WebViewJavascriptBridge.callHandler(
                'submitFromWeb'
                , {'param': '中文测试'}
                , function(responseData) {
                    document.getElementById("show").innerHTML = "send get responseData from javas, data = " + responseData
                }
            );

        }

        function testClick2() {
            var str1 = document.getElementById("text1").value;
            var str2 = document.getElementById("text2").value;

            //call native method
            window.WebViewJavascriptBridge.callHandler(
                'submitFromWeb2'
                , {'param': '中文测试'}
                , function(responseData) {
                    document.getElementById("show").innerHTML = "send get responseData from java, data = " + responseData
                }
            );
        }

        function bridgeLog(logContent) {
            document.getElementById("show").innerHTML = logContent;
        }

        function connectWebViewJavascriptBridge(callback) {
            if (window.WebViewJavascriptBridge) {
                callback(WebViewJavascriptBridge)
            } else {
                document.addEventListener(
                    'WebViewJavascriptBridgeReady'
                    , function() {
                        callback(WebViewJavascriptBridge)
                    },
                    false
                );
            }
        }
        // 处理send
        connectWebViewJavascriptBridge(function(bridge) {
            bridge.init(function(message, responseCallback) {
                console.log('JS got a message', message);
                var data = {
                    'Javascript Responds': '测试中文!'
                };

                if (responseCallback) {
                    console.log('JS responding with', data);
                    responseCallback(data);
                }
            });

            bridge.registerHandler("functionInJs", function(data, responseCallback) {
                document.getElementById("show").innerHTML = ("data from Java: = " + data);
                if (responseCallback) {
                    var responseData = "Javascript Says Right back aka!";
                    responseCallback(responseData);
                }
            });

            bridge.registerHandler("function", function(data, responseCallback) {
                document.getElementById("show").innerHTML = ("data from Java jsss: = " + data);
                if (responseCallback) {
                    var responseData = "Javascript Says Right back aka!";
                    responseCallback(responseData);
                }
            });

            bridge.registerHandler("getData", function(data, responseCallback) {
                document.getElementById("show").innerHTML = ("String list: = " + "\""+ data.toString()+"\"");
                console.log(data)
            });
        })

        function test(){
<!--            android.Test();-->

            window.WebViewJavascriptBridge.callHandler(
                'getData','aa'
                , function(responseData) {
                consoleo.log(responseData)
                    document.getElementById("show").innerHTML = "send get responseData from java, data = " + responseData
                }
            );
        }
























































</script>

</html>

